<template>
	<view class="content">
		<!-- <view class="welcome">
			<text>Welcome</text>
		</view> -->
		<view class="form-box">

			<!-- 邮箱登录表单 -->
			<view class="form" v-if="reads">
				<uni-forms ref="emailLoginRef" :rules="emailRules" :modelValue="emailLoginInfo">
					<uni-forms-item name="email">
						<uni-easyinput v-model="emailLoginInfo.email" placeholder="邮箱" :maxlength="20"/>
					</uni-forms-item>
					<uni-forms-item name="password">
						<uni-easyinput v-model="emailLoginInfo.password" placeholder="密码" type="password"/>
					</uni-forms-item>
				</uni-forms>
			</view>

			<!-- 手机登录表单 -->
			<view class="form" v-else>
				<uni-forms ref="phoneLoginRef" :rules="phoneRules" :modelValue="phoneLoginInfo">
					<uni-forms-item name="phone">
						<uni-easyinput v-model="phoneLoginInfo.phone" placeholder="手机号码" />
					</uni-forms-item>
					<uni-forms-item>
						<view class="input-btn" style="display: flex;">
							<uni-easyinput v-model="phoneLoginInfo.captcha" placeholder="验证码" />
							<button type="default" @click="getVerificaton"
								style="width: 230upx; height: 85upx; font-size: 30upx; margin: 0; border-radius: 30upx; border:1upx solid #000000;">{{VerificatonNumber}}</button>
						</view>
					</uni-forms-item>
				</uni-forms>
			</view>

			<view class="form-btn" @click="submit">
				<text>立即登录</text>
			</view>

		</view>
		<!-- // 切换登录方式 -->
		<view class="loginMode-box" @click="loginMode">
			<view class="loginMode" v-if="reads">
				<image :src=loginModeImagSrc[0] mode="widthFix"></image>
			</view>
			<view class="loginMode" v-else>
				<image :src=loginModeImagSrc[1] mode="widthFix"></image>
			</view>
		</view>

		<view class="register">
			<view v-for="(item,i) in registerData" :key='i' @click="goToPage(i)">
				<text>{{item}}</text>
			</view>


		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				registerData: ['忘记密码?', '|', '立即注册'],
				userid:'',
				// 邮箱登录信息
				emailLoginInfo: {
					email: '',
					password:'',
					isLogin:true
				},
				// 手机验证码登录信息
				phoneLoginInfo: {
					phone: '',
					captcha: '',
					isLogin:true
					
				},
				// 邮箱验证规则
				emailRules: {
					email: {
						rules: [{
								required: true,
								errorMessage: '请输入邮箱地址',
							},
							{
								format: 'email',
								errorMessage: '请输入正确的邮箱地址',
							}
						],
					},
					password: {
						rules: [{
								required: true,
								errorMessage: '请输入密码',
							},
							{
								minLength: 6,
								maxLength: 15,
								errorMessage: '密码长度在 {minLength} 到 {maxLength} 个字符',
							}
						]
					}
				},
				// 手机登录验证规则
				phoneRules: {
					phone: {
						rules: [{
								required: true,
								errorMessage: '请输入手机号码',
							},
							{
								format: 'number',
								errorMessage: '请输入正确的手机号码',
							}
						],
					},
					// password: {
					// 	rules: [{
					// 			required: true,
					// 			errorMessage: '请输入验证码',
					// 		},
					// 		{
					// 			minLength: 3,
					// 			maxLength: 15,
					// 			errorMessage: '长度在 {minLength} 到 {maxLength} 个字符',
					// 		}
					// 	]
					// }
				},
				// 切换登录方式图标
				loginModeImagSrc: ['../../static/login/phone.png', '../../static/login/emain.png'],
				// 控制登录方式显隐
				reads: true,
				VerificatonNumber: '获取验证码',
				timer: 30,
				cookiestoken:''
			}
		},
		methods: {

			loginMode() {
				// 清空数据，避免携带
				this.emailLoginInfo.password = ''
				this.phoneLoginInfo.password = ''
				this.reads = !this.reads
			},

			// 获取验证码
			async getVerificaton2() {
				console.log(1)
				const {
					data: res
				} = await this.$request({
					url: '/captcha/sent',
					data: {
						phone: this.phoneLoginInfo.phone
					}
				})
				console.log(res)
			},
			getVerificaton() {
				this.$refs.phoneLoginRef.validate().then(v => {
					if (this.phoneLoginInfo.phone.length !== 11) {
						return uni.showToast({
							title: '号码长度不正确',
							icon: 'error'
						})
					}
					this.getVerificaton2()

				})
				if (this.timer < 30) {
					return
				}
				let timer = setInterval(() => {
					if (this.timer > 0) {
						this.timer--;
						this.codeTimer = true;
						this.VerificatonNumber = `请${this.timer}s后重试`;
					} else {
						this.codeTimer = false;
						this.VerificatonNumber = "获取验证码";
						this.timer = 30;
						clearInterval(timer);
					}
				}, 1000)
			},

			// 提交表单
			submit() {

				if (this.reads) {
					this.$refs.emailLoginRef.validate().then(async () => {
						this.emailLogin()
					}).catch(err => {
						console.log('表单错误信息：', err);
					})

				} else {
					this.$refs.phoneLoginRef.validate().then(async () => {
						if (this.phoneLoginInfo.captcha !== '') {
							this.verificationCode()
						}
					}).catch(err => {
						console.log(err)
					})

				}
			},
			async phoneLogin() {
				const res = await this.$request({
					url: '/login/cellphone',
					method: 'GET',
					data: this.phoneLoginInfo
				})
				switch(res.code){
					case 250:{
						// "当前登录失败，请稍后再试"
						console.log(res.message)
						break
					}
					case 200:{
						// 登录成功
						console.log(res)
						this.cookiestoken = res.cookie
							uni.setStorageSync('cookies',this.cookiestoken)
							console.log('登录成功')
							
						uni.setStorageSync("userInfo", JSON.stringify(res.profile));
						uni.reLaunch({
							url:'../home/home'
						})
						break
					}
					case 501:{
						// 账号不存在
						console.log(res.message)
						break
					}
					case 502:{
						// 密码错误
						console.log(res.message)
						break
					}
					default:{
						return
					}
				}
			},
			async emailLogin() {
				const res = await this.$request({
					url: '/login',
					method: 'GET',
					data: this.emailLoginInfo,

				})
				console.log(res)
				console.log('邮箱登录')
				switch(res.data.code){
					case 250:{
						// "当前登录失败，请稍后再试"
						console.log(res.message)
						break
					}
					case 200:{
						// 登录成功
						this.cookietoken = res.data.cookie
						this.userid = res.data.account.id
						uni.setStorageSync('cookietoken', this.cookietoken)
						uni.setStorageSync('userid', this.userid)
						console.log('登录成功')
						
						uni.reLaunch({
							url:'../home/home'
						})
						uni.setStorageSync("userInfo", JSON.stringify(res.data.profile))
						break
					}
					case 501:{
						// 账号不存在
						console.log(res.message)
						break
					}
					case 502:{
						// 密码错误
						console.log(res.message)
						break
					}
					default:{
						return
					}
				}
			},
			// 验证验证码
			async verificationCode() {
				const res = await this.$request({
					url: '/captcha/verify',
					data: this.phoneLoginInfo
				})
				if (res.code === 200) {
					this.phoneLogin()
				} else {
					return uni.showToast({
						title: '请检查验证码',
						icon: 'error'
					})
				}
			},
			goToPage(i){
				if(i === 0){
					// 忘记密码
							return	uni.navigateTo({
									url:'../forgetPassword/forgetPassword',
									fail(res) {
										console.log(res)
									}
								})		
				}else if(i === 2){
					// 去注册页
					return uni.navigateTo({
						url:'../registeredAccount/registeredAccount',
						fail(res) {
							console.log(res)
						}
					})	
				}
				
			}

		}
	}
</script>

<style scoped>
	.content {
		margin-top: 40%;
		padding-left: 10%;
		padding-right: 10%;
	}

	.welcome {
		position: absolute;

		left: 50%;
		top: 20%;
		transform: translate(-50%, -50%);
		text-align: center;
		font-size: 60upx;
	}

	.form-btn {
		padding: 8upx;
		color: #FFFFFF;
		font-size: 45upx;
		text-align: center;
		background-color: #ff5500;
		border-radius: 30upx;
	}

	.register {
		margin-top: 20%;
		font-size: 20upx;
		display: flex;
		justify-content: center;
	}

	.register text {
		display: flex;
		margin: 12upx;

	}

	.loginMode-box {
		display: flex;
		justify-content: center;
	}

	.loginMode {
		margin-top: 20%;
		text-align: center;
		width: 100upx;
		height: 100upx;
		border-radius: 50%;
		background-color: #ff5500;
	}

	.loginMode image {
		margin-top: 20%;
		width: 60upx;
		height: 60upx;
	}
</style>
